<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="address_add_member">
    <div class="_address_add_member">
        <div class="_pop-container">
            <div class="_top">
                添加成员
            </div>
            <div class="_content">
                <div>
                    <span class="_title">工号: </span>
                    <input class="_input" type="text" v-model="form.employ_id">
                </div>
                <div>
                    <span class="_title">姓名: </span>
                    <input class="_input" type="text" v-model="form.name">
                </div>
                <div>
                    <span class="_title">电话: </span>
                    <input class="_input" type="text" v-model="form.phone">
                </div>
                <div>
                    <span class="_title">科室: </span>
                    <div class="_select">
                        <multiselect :datas="deptList" :selected="selectDept" type="selectDept" :expression="deptFunc" key="deptName" needinput="true"></multiselect>
                    </div>
                </div>
                <div>
                    <span class="_title">职称: </span>
                    <div class="_select">
                        <singleselect :list="workList" :choosed="selectWork" value="selectWork" key="name" editable="false"></singleselect>
                    </div>
                </div>
                <div>
                    <span class="_title">职位: </span>
                    <div class="_select">
                        <singleselect :list="jobList" :choosed="selectJob" value="selectJob" key="name" editable="false"></singleselect>
                    </div>
                </div>
                <div>
                    <span class="_title"></span>
                    <div class="_submit-container">
                        <div class="_submit" @click="submit()">确定</div>
                    </div>
                </div>
            </div>
            <img class="_close" src="/images/components/add_member/ic-close.png" alt="" @click="closeAddMember()">
        </div>
    </div>
</script>
<script src="/js/components/validate.js"></script>
<script>
    var HOSPITAL = "${user.hospital}";
    var addMember = {
        template: "#address_add_member",
        props: [],
        data: function() {
            return {
                deptList: [],
                selectDept: [],
                workList: [],
                selectWork: "",
                jobList: [],
                selectJob: "",
                form: {
                    employ_id: "",
                    name: "",
                    phone: "",
                },
                validateTag: {
                    employ_id: 0,
                    name: 0,
                    phone: 0,
                },
                eeesysPlugin: {},
            }
        },
        computed: {

        },
        methods: {
            closeAddMember: function() {
                this.$dispatch("closeAddMember");
            },
            submit: function() {
                for (var i in this.validateTag) {
                    var text = this.validateModule.done(this.form, i);
                    if (text != "") {
                        this.$dispatch("danger", text);
                        return;
                    }
                }
                if (this.selectDept.length == 0) {
                    this.$dispatch("danger", "请选择科室");
                    return;
                }
                if (this.selectWork == "") {
                    this.$dispatch("danger", "请选择职称");
                    return;
                }
                if (this.selectJob == "") {
                    this.$dispatch("danger", "请选择职位");
                    return;
                }
                var _this = this;
                $.ajax({
                    type: 'POST',
                    url: location.href,
                    data: {
                        act: "addressAdd",
                        hospital: HOSPITAL,
                        employee_id: this.form.employ_id + "",
                        name: this.form.name,
                        phone: this.form.phone,
                        depts: this.selectDept.map(function(item) {return item.id}).join(","),
                        title_id: this.selectWork.id + "",
                        duty_id: this.selectJob.id + "",
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            _this.$dispatch("successAddMember");
                        } else {
                            _this.$dispatch("danger", res.errmsg);
                        }
                    },
                });
            },
            deptFunc: function(res) {
                return res.replace(/^-*/g, "");
            }
        },
        events: {
            selectedChange: function(data) {
                this[data.type] = data.selected;
            }
        },
        ready: function() {
            var validateModule = validateJS();
            validateModule.addValidate("phone", "phone");
            validateModule.addValidate("employ_id", "employ_id");
            validateModule.addValidate("name", "name");
            this.validateModule = validateModule;
            var _this = this;
            $.ajax({
                type: 'POST',
                url: location.href,
                data: {
                    act: "organizationQuery",
                    deptType: "20",
                    hospital: HOSPITAL
                },
                success: function(res) {
                    res = JSON.parse(res);
                    if (res.errcode == 0) {
                        var deptList = res.data;
                        var deployList = [];
                        deploy(deptList, 0);
                        _this.deptList = deployList;
                        function deploy(list, deep) {
                            if (Array.isArray(list)) {
                                for (var i = 0; i < list.length; i++) {
                                    deploy(list[i], deep);
                                }
                            } else {
                                var li = "";
                                for (var i = 0; i < deep; i++) {
                                    li += "-";
                                }
                                list.deptName = li + list.deptName;
                                deployList.push(list);
                                if (list.sub_dept && list.sub_dept.length > 0) {
                                    deploy(list.sub_dept, deep + 1);
                                }
                            }
                        }
                    } else {
                        _this.$dispatch("danger", res.errmsg);
                    }
                },
            });
            $.ajax({
                type: 'POST',
                url: location.href,
                data: {
                    act: "titleAndDutyList",
                    hospital: HOSPITAL
                },
                success: function(res) {
                    res = JSON.parse(res);
                    if (res.errcode == 0) {
                        _this.workList = res.data["职称"];
                        _this.jobList = res.data["职位"];
                    } else {
                        _this.$dispatch("danger", res.errmsg);
                    }
                },
            });
        },
        components: {
            multiselect: multiselect,
            singleselect: singleselect
        }
    }
</script>
<style>
    ._address_add_member {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 10;
        font-size: 18px;
    }
    ._address_add_member ._pop-container {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: auto;
        width: 500px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    ._address_add_member ._top {
        background: #e6eaf5;
        color: #333;
        line-height: 80px;
        font-size: 20px;
        text-align: center;
    }
    ._address_add_member ._content {
        padding: 40px 0;
        text-align: center;
        background: #fff;
    }
    ._address_add_member ._input, ._address_add_member ._select {
        display: inline-block;
        margin-bottom: 20px;
        width: 300px;
        box-sizing: border-box;
        line-height: 40px;
        border: 1px solid #C8CACD;
        vertical-align: top;
    }
    ._address_add_member ._input {
        padding: 0 20px;
    }
    ._address_add_member ._submit-container {
        display: inline-block;
        width: 300px;
        text-align: left;
    }
    ._address_add_member .single-selected-container .single-selected-show {
        border: 0;
    }
    ._address_add_member .multi-selected-container .multi-selected-show {
        border: 0;
    }
    ._address_add_member ._title {
        display: inline-block;
        line-height: 40px;
        width: 63px;
    }
    ._address_add_member ._submit {
        display: inline-block;
        padding: 6px 30px;
        background: #3f8dfa;
        border-radius: 4px;
        color: #fff;
    }
    ._address_add_member ._close {
        position: absolute;
        width: 30px;
        height: 30px;
        right: -15px;
        top: -15px;
    }
</style>
